<template>
  <div class="app-container">
    <a-row :gutter="24">
      <a-card  :bordered="false" class="box-card">
        <h1 slot="title">上传安装包资源</h1>
        <a-form layout="horizontal" :model="formState" ref="formRef" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-col :span="3" :xs="12">
            <a-form-item label="上传安装包">
              <div class="upload-container">
              <a-upload v-model:fileList="formState.uploadApk" list-type="picture-card" :max-count="1">
                <div v-if="formState.uploadApk.length <1">
                  <PlusOutlined :style="{fontSize: '32px', color: 'rgba(222, 222, 222, 1)'}"/>
                  <div class="margintop18">上传apk</div>
                </div>
              </a-upload>
              <div class="upload-instructions">仅支持上传1个apk包（32位、64位或32位/64位兼容包）；</div></div>
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="视频标题" name="title">
                <a-input
                  v-model:value="formState.title"
                  allow-clear
                  show-count
                  :maxlength="20"
                  placeholder="请输入20字以内的视频标题"
                  style="width: 700px;"
                />
              </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="封面图" >
              <div class="upload-container">
              <a-upload v-model:fileList="formState.banner" list-type="picture-card" :max-count="1">
                <div v-if="formState.banner.length <1">
                  <PlusOutlined :style="{fontSize: '32px', color: 'rgba(222, 222, 222, 1)'}"/>
                  <div class="margintop18">点击或拖拽上传</div>
                </div>
              </a-upload>
              <div class="upload-instructions">① 请上传1张，建议尺寸1920×1080px，最小尺寸370X180像素，单张不超过1M的图片<br>
                ② 支持JPG、PNG格式
                </div>
              </div>
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="游戏视屏">
              <div class="upload-container">
              <a-upload v-model:fileList="formState.videoScreen" list-type="picture-card" :multiple="true" :max-count="5">
                <div v-if="formState.videoScreen.length <5">
                  <PlusOutlined :style="{fontSize: '32px', color: 'rgba(222, 222, 222, 1)'}"/>
                  <div class="margintop18" >点击或拖拽上传</div>
                </div>
              </a-upload>
              <div class="upload-instructions">① 请上传4~5张，建议尺寸1920×1080px，最小尺寸370X180像素，单张不超过1M的图片<br>
                ② 支持JPG、PNG格式
                </div>
              </div>
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="电子版授权证书（选填）">
              <div class="upload-container">
              <a-upload v-model:fileList="formState.certificates" list-type="picture-card">
                <div v-if="formState.certificates.length <1">
                  <PlusOutlined :style="{fontSize: '32px', color: 'rgba(222, 222, 222, 1)'}"/>
                  <div class="margintop18" >点击或拖拽上传</div>
                </div>
              </a-upload>
                <div class="upload-instructions">
                若应用已申请电子版权认证，并获得版权证书，可在此上传版权证书。
                </div>
              </div>
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="资源证明">
              <div class="upload-container">
              <!-- <a-upload 
                :before-upload="handleBeforeUpload"
                :on-change="handleFileChange"
                :file-list="fileList"
                accept=".jpeg,.png,.jpg,.bmp,.gif"
                v-model:fileList="formState.proof"
                :multiple="true" list-type="picture-card" :max-count="5">
                <div v-if="formState.proof.length <5">
                  <PlusOutlined :style="{fontSize: '32px', color: 'rgba(222, 222, 222, 1)'}"/>
                  <div class="margintop18" >点击或者拖拽上传</div>
                </div>
              </a-upload> -->
              <a-upload
                :before-upload="handleBeforeUpload"
                :on-change="handleFileChange"
                :file-list="fileList"
                accept=".jpeg,.png,.jpg,.bmp,.gif"
                v-model:fileList="formState.proof"
                :multiple="true"
                list-type="picture-card"
                :max-count="5"
              >
                <div v-if="formState.proof.length <5">
                  <PlusOutlined :style="{fontSize: '32px', color: 'rgba(222, 222, 222, 1)'}"/>
                  <div class="margintop18" >点击或者拖拽上传</div>
                </div>
                <!-- <template #extra>
                  <div v-if="formState.proof.length < 5">
                    <a-icon type="plus" :style="{ fontSize: '32px', color: 'rgba(222, 222, 222, 1)' }" />
                    <div class="margintop18">点击或者拖拽上传</div>
                  </div>
                </template> -->
              </a-upload>
              <div class="upload-instructions">
                (支持批量上传文件，文件格式不限，最多只能上传 5 份文件)<br>
                ① 请提供软件著作权扫描件，快速申请软件著作权；<br>
                ② 若未申请软件著作权，请下载开发者声明，填写后提交扫描件；<br>
                ③ 所有文件上传仅接受JPEG/PNG格式。<br>
                (若设计到新闻、股票、医疗、彩票、银行业务等还需要提供相应版权证明)
              </div>
              <!-- <i class="fr" slot="extra">(支持批量上传文件，文件格式不限，最多只能上传 5 份文件)<br>① 请提供软件著作权扫描件，快速申请软件著作权；<br>② 若未申请软件著作权，请下载开发者声明，填写后提交扫描件；<br>③ 所有文件上传仅接受JPEG/PNG格式。<br>(若设计到新闻、股票、医疗、彩票、银行业务等还需要提供相应版权证明)</i>  -->
              <!-- <i class="fr fr1">(支持批量上传文件，文件格式不限，最多只能上传 5 份文件)<br>① 请提供软件著作权扫描件，快速申请软件著作权；<br>② 若未申请软件著作权，请下载开发者声明，填写后提交扫描件；<br>③ 所有文件上传仅接受JPEG/PNG格式。<br>(若设计到新闻、股票、医疗、彩票、银行业务等还需要提供相应版权证明)</i> -->
            <!-- </a-form-item> -->
            <!-- <a-form-item
              label="资源证明"
              name="resourceProof"
              :rules="[{ required: true, message: '请上传资源证明文件' }]"
            >
              <a-upload
                :before-upload="handleBeforeUpload"
                :on-change="handleFileChange"
                :file-list="fileList"
                :multiple="true"
                list-type="picture-card"
                accept=".jpeg,.png,.jpg,.bmp,.gif"
              >
                <a-button> 
                  <a-icon type="upload" /> 点击或拖拽上传 
                </a-button> 
              </a-upload>
             <div slot="extra">支持批量上传文件，文件格式不限，最多只能上传5份文件</div> -->
             </div>
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="隐私政策" name="url">
              <a-radio-group v-model:value="formState.type">
                <a-radio :value="1" >输入URL
                  <a-input v-if="formState.type===1" v-model:value="formState.url" placeholder="请输入URL" style="max-width: 190px" allow-clear  />
                </a-radio>
                <a-radio :value="2">输入文本内容
                  <a-input v-if="formState.type===2" v-model:value="formState.txt" placeholder="请输入文本内容" style="max-width: 190px;margin-right: 14px;" allow-clear />
                </a-radio>
              </a-radio-group>
              <!-- <a-form-item>
              </a-form-item> -->
              <!-- <a-space class="icons" @click="views">
                <QuestionCircleOutlined /><i style="color: #4CC87E;font-style: normal;" >查看规范</i>
              </a-space> -->
              <a-space class="icons" @click="views">
                <a-popover title="Title">
                  <template #content>
                    <p>Content</p>
                    <p>Content</p>
                  </template>
                  <QuestionCircleOutlined />
                </a-popover>
                <i style="color: #4CC87E;font-style: normal;" >查看规范</i>
              </a-space>
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="发布类型" name="resource">
            <a-radio-group v-model:value="formState.resource">
              <a-radio :value="1">审核通过后立即发布
              </a-radio>
              <a-radio :value="2">定时发布
              </a-radio>
            </a-radio-group>
            <a-time-picker v-if="formState.resource===2" v-model:value="formState.date1" />
            <!-- <a-date-picker 
              v-model:value="formState.date1"
              show-time
              v-if="formState.resource===2"
              type="date"
              placeholder="Pick a date"
            /> -->
          </a-form-item>
          <a-form-item
            :wrapperCol="{ span: 24 }"
            style="text-align: center"
          >
              <a-button htmlType="submit" style="margin-right: 16px; background-color: rgba(76, 200, 126, 1);" type="primary" @click="onSave">保存并提交</a-button>
              <a-button style="margin-left: 8px" @click="resetForm">取消保存</a-button>
            </a-form-item>
          </a-col>
        </a-form>
      </a-card>
    </a-row>
  </div>
</template>

<script setup>
import { ref, reactive,toRaw  } from 'vue';
import {
    // SearchOutlined,
    QuestionCircleOutlined,
    PlusOutlined,
    UploadOutlined,
    RightOutlined,
    DeleteOutlined,
    CheckCircleTwoTone,
  } from '@ant-design/icons-vue';
  const labelCol = {
  style: {
    width: '180px',
  },
};
const wrapperCol = {
  span: 24,
};

const formRef = ref()
const formState = reactive({
  uploadApk:[],
  title: '',
  banner:[],
  videoScreen:[],
  certificates:[],
  proof:[],

  type:Number,
  url:'',
  txt:'',
  resource:Number,
  date1: '',
});
const rules = {
  title: [
    {
      required: true,
      message: 'Please input Activity title',
      trigger: 'change',
    },
    {
      min: 3,
      max: 5,
      message: 'Length should be 2 to 20',
      trigger: 'blur',
    },
  ],
}
const formItemLayout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 8,
  },
};
const formTailLayout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 14,
    offset: 4,
  },
};

// 资质证明
const fileList = ref([]);

const handleBeforeUpload = (file) => {
  const isAllowedType = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isAllowedType) {
    console.error('所有文件上传仅接受JPEG/PNG格式!');
    return false;
  }
  return isAllowedType;
};

const handleFileChange = (info) => {
  let newFileList = info.fileList;
  if (newFileList.length > 5) {
    console.error('最多只能上传5份文件!');
    newFileList = newFileList.slice(0, 5);
  }
  fileList.value = newFileList;
};

const onSave=(values) => {
  formRef.value.validate().then(()=>{
    console.log('values',formState,toRaw(formState));
  }).catch((e) => {})
  console.log(formState,1111);
  console.log('Success:', values);
}
const resetForm = () => {
  formRef.value.resetFields();
  formState.type = ''
  formState.date1 = ''
  formState.txt = ''
};
const views =()=>{
  console.log('view',1111);
}



</script>

<style lang="less" scoped>
.app-container{
  width: 100%;
  padding: 15px;
  background: #ececec;
}

.box-card {
  padding-left: 175px;
  width: 100%;
  border-radius: 2px;
  border: 1px solid #e6ebf5;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  h1{
    height: 48px;
    text-align: center;
    font-weight:bolder;
  }
}
:deep(.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select){
  // width: 120px !important;
  // height: 120px !important;
}
.upload-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
:deep(.ant-upload-wrapper.ant-upload-picture-card-wrapper){
  width: auto;
}
.upload-instructions {
  // flex: 1;
  margin-left: 15px;
  font-size: 12px;
  color: #888;
}
.fr {
  display: block;
  // float: left;
  margin-top: -40px;
  margin-left:140px;
  // width: 400px;
  width: 100%;
  height: 40px;
  white-space: pre-wrap;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #969696;
  line-height: 20px;
  text-align: left;
}
.fr1 {
  margin-top: 0px !important;
}
.margin24{
  margin-right: 24px;
}
.margintop18{
  margin-top: 18px;
  font-weight: 400;
  font-size: 12px;
  color: #CCCCCC;
  line-height: 20px;
  text-align: left;
}
.icons{
  width: 80px;
  height: 20px;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer
}
.footer_content{
  display:flex;
  justify-content: center;
  align-items: center;
}
</style>